<script setup lang="ts">
import {getCurrentInstance, onMounted, reactive} from "vue";
import {get, post} from "../http";
import {resTip} from "../util/Common";

interface mallInfoIf {
  uid: number,
  count: number,
  detail: number,
  id: number,
  price: number,
  createTime: string,
  platformType: number,
  productName: string,
  productPic: string,
  store: string,
  type: string,
  updateTime: string
}

let mallInfo = reactive<Array<mallInfoIf>>([])
const {proxy}: any = getCurrentInstance();
onMounted(() => {
  getMallInfo(1);
})
let totalProduct;

async function getMallInfo(page: number) {
  let res = await get(`/mall/list?pageNum=${page}&pageSize=10`);
  mallInfo.length = 0
  res.data.records.forEach((val: any) => {
    mallInfo.push(val);
  })
  console.log(mallInfo)
}


async function deleteProdInfo(id: number) {
  resTip(proxy, await post(`/mall/delete?id=${id}`, {}));
  await getMallInfo(1);
}

async function addProdCount(id: number, row: number) {
  if (mallInfo[row].count !== 999) {
    mallInfo[row].count++;
    let res = await post(`/mall/update/count?id=${id}&update=${mallInfo[row].count}`, {});
    if (res.code !== 200) {
      mallInfo[row].count--;
      proxy.$notify.error({
        title: 'error!',
        message: res.msg
      })
    }
  }
}

async function subProdCount(id: number, row: number) {
  if (mallInfo[row].count > 1) {
    mallInfo[row].count--;
    let res = await post(`/mall/update/count?id=${id}&update=${mallInfo[row].count}`, {});
    if (res.code !== 200) {
      mallInfo[row].count++;
      proxy.$notify.error({
        title: 'error!',
        message: res.msg
      })
    }
  }
}

</script>

<template>
  <div>
    <div class="prod-item" v-for="(item,row) in mallInfo" key="item.id">
      <div class="main-info">
        <p>{{ item.productName }}</p>
        <img :src="item.productPic"
             alt="">
      </div>
      <div class="other-info">
        <div class="title">
          <span class="money">￥{{ item.price }}</span>
          <div class="count-area">
            <el-button @click="subProdCount(item.id,row)">-</el-button>
            <div class="counter">
              {{ item.count }}
            </div>
            <el-button @click="addProdCount(item.id,row)">+</el-button>
            <el-button style="margin-left: 30px" type="danger" @click="deleteProdInfo(item.id)">删除</el-button>
          </div>
        </div>
        <div class="detail">
          <div class="detail-line">
            <span class="tag">类型:</span>
            <span>{{ item.type }}</span>
          </div>
          <div class="detail-line">
            <span class="tag">店铺:</span>
            <span>{{ item.store }}</span>
          </div>
          <div class="detail-line">
            <span class="tag">来自:</span>
            <span>{{ item.platformType === 1 ? "淘宝" : item.platformType === 2 ? "京东" : "拼多多" }}</span>
          </div>
          <div class="detail-line">
            <span class="tag">创建时间:</span>
            <span>{{ item.createTime }}</span>
          </div>
          <div class="detail-line detail-msg">
            <span class="tag">详情:</span>
            <span class="content">
              {{ item.detail }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.prod-item {
  display: flex;
  align-items: center;
  height: 340px;
  overflow: hidden;
  border: solid 1px #c7c7c7;
  border-radius: 10px;
  margin: 10px;

  .main-info {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    width: 450px;

    p {
      margin-top: 20px;
      width: 70%;
      font-size: 15px;
      color: red;
      height: 40px;
      overflow: hidden;
    }

    img {
      margin-top: 20px;
      border-radius: 5%;
      max-height: 240px;
    }
  }

  .other-info {
    height: 100%;
    display: flex;
    flex-direction: column;

    .title {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;

      .money {
        margin-right: 30px;
        font-size: 25px;
        color: red;
      }

      .count-area {
        width: 57px;
        display: flex;
        align-items: center;

        .el-button {
          padding: 5px 10px;
        }

        .counter {
          margin-left: 10px;
          margin-right: 10px;
          min-width: 20px;
          text-align: center;
        }
      }

      .count {
        color: #000000;
      }
    }


    .detail {
      margin-top: 20px;

      .detail-line {
        font-size: 15px;
        display: flex;
        margin-bottom: 10px;

        .tag {
          text-align: center;
          width: 80px;
          color: #2bb5fd;
        }
      }


      .detail-line.detail-msg {
        font-size: 14px;

        .content {
          width: 80%;
          height: 150px;
          overflow: auto;
        }
      }
    }
  }
}
</style>
